<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="widget-box">
	<div class="widget-header header-color-pink">
		<h5>
			<i class="icon-table"></i>渗压传感器趋势图
		</h5>
		<div class="widget-toolbar no-border">
			<button id="export" onclick="exportExcel('/export/osmometer_his');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-download-alt"> 导出Excel</i>
			</button>
			<button id="print" onclick="Print.print();" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-print"> 打印</i>
			</button>
		</div>
	</div>
	<div class="widget-body">

		<div class="widget-toolbox padding-2 clearfix">
			<!-- 查询条件 start -->
			<form id="searchForm" class="form-inline" role="form">
				<div class="form-group">
					<div class="col-sm-9" style="width: 150px; padding: 0px;">
						<select name="senid" id="senid" class="col-xs-10 col-sm-5" style="width: 150px; height: 34px;">
							<c:forEach var="osmometer" items="${osmometers}" varStatus="osidx">
								<option value="${osmometer.id}">${osmometer.name}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<input name="begin" placeholder="选择开始时间" type="text" id="begin" data-date-format="yyyy-mm-dd" class="form-control" style="width: auto;"> 至 <input name="end" placeholder="截至时间" type="text"
					id="end" data-date-format="yyyy-mm-dd" class="form-control" style="width: auto;">
				Y轴显示最小值：<input name="min" placeholder="Y轴显示最小值" type="text" id="min" value="-50" style="width: 50px;">
				Y轴显示最大值：<input name="max" placeholder="Y轴显示最大值" type="text" id="max" value="50" style="width: 50px;">
				<button type="button" onclick="queryLine();" class="btn btn-default btn-sm">
					查询 <i class="icon-search icon-on-right bigger-110"></i>
				</button>
			</form>
		</div>
		<!-- 查询条件 end -->

		<div id="printdiv" class="widget-main no-padding">
			<div id="chart-div"></div>
		</div>

	</div>
</div>

<script type="text/javascript">
	
	_addData([],{
		div : 'chart-div',
		title : '水位变化趋势图',
		ytitle : '水位变化量(CM)',
		type : 'spline',
		min : -50,
		max : 50
	}, null, true);

	function queryLine() {
		var senid = $('#senid').val();
		var begin = $('#begin').val();
		var end = $('#end').val();
		if (begin == '' || end == '') {
			alert('选择开始和结束时间!');
			return;
		}
		var url = "/history/osmometerdata";
		var param = {
			senid : senid,
			begin : begin,
			end : end
		};
		var min = $('#min').val();
		var max = $('#max').val();
		ajaxSubmit(url, param, 'POST', function(d) {
			var data = eval('(' + d + ')');
			console.log(data);
			if (data.min < min) {
				min = data.min;
				$('#min').val(min.toFixed(2));
			}
			if (data.max > max) {
				max = data.max;
				$('#max').val(max.toFixed(2));
			}
			var options = {
				div : 'chart-div',
				title : $("#senid").find("option:selected").text()+'水位变化趋势图',
				ytitle : '水位变化量(CM)',
				min : min,
				max : max
			};
			_addData(data.data, options, null, false);
		});
	}

	var _chart2;

	function _destroyChart() {
		if (_chart2) {
			_chart2.destroy();
			_chart2 = null;
		}
	}
	function _addData(data, options, hor, destroy) {
		//if (data.length == 0)
			//return;
		if (destroy)
			_destroyChart();
		if (_chart2) {
			//_chart2.addSeries(data[0]);
			_chart2.setTitle({text:options.title},null);
			_chart2.yAxis[0].setExtremes(options.min, options.max,true,true);
			_chart2.series[0].setData(data, true, null, true);
		} else {
			_makeData(data, options);
		}
	}
	function _makeData(data, options) {
		_chart2 = new Highcharts.Chart({
			chart : {
				type : (options.type == null ? 'spline' : options.type),
				renderTo : document.getElementById(options.div),
				//zoomType : 'x',
				height : 480
			},
			credits : {
				enabled : false
			},
			title : {
				text : options.title
			},
			rangeSelector : {
				enabled : false
			},
			series : [ {
				data : data
			} ],
			tooltip : {
				xDateFormat : '%Y-%m-%d %H:%M:%S',
				useHTML : true,
				formatter : function() {
					return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>水位变化量：' + (this.y).toFixed(2) + '(cm)';
				}
			},
			xAxis : {
				title : {
					text : '日期/时间'
				},
				type : 'datetime',
				gridLineWidth : 1,// 默认是0，即在图上没有纵轴间隔线
				lineColor : '#990000',
				tickPixelInterval : 80,
				//tickInterval: 5,隔几个点显示x坐标
				// x轴时间的格式化
				dateTimeLabelFormats : {
					second : '%H时<br/>%M分',
					minute : '%H时<br/>%M分',
					hour : '%H时<br/>%M分',
					day : '%m-%d',
					week : '%m-%d',
					month : '%Y-%m',
					year : '%Y'
				}
			},

			yAxis : {
				gridLineWidth : 1,
				min: options.min,
				max: options.max,
				title : {
					text : options.ytitle
				},
				tickPixelInterval : 15,
				lineWidth : 2,
				labels : {
					align : 'right',
					x : -3,
					y : 6
				}
			//,
			//plotLines :hor
			},
			legend : {
				enabled : false,
				align : 'center',
				backgroundColor : '#FCFFC5',
				borderColor : 'black',
				borderWidth : 2,
				//layout: 'vertical',
				verticalAlign : 'top',
				y : 30,
				shadow : true
			},
			/* navigator : {
				enabled : true,
				outlineWidth : 0.5,
				xAxis : {
					dateTimeLabelFormats : {
						second : '%H:%M:%S',
						minute : '%d<br/>%H:%M',
						hour : '%d<br/>%H:%M',
						day : '%m-%d',
						week : '%m-%d',
						month : '%Y-%m',
						year : '%Y'
					}
				}
			}, */
			plotOptions: {
                spline: {
                    marker: {
                        radius: 0
                    }
                }
            },
			exporting : {
				enabled : false
			}
		});
	}
</script>

<script type="text/javascript">
	$("#begin").datepicker({
		autoclose : true,
	});
	$("#end").datepicker({
		autoclose : true,
	});
	
	function exportExcel(urlStr){
		var senid = $('#senid').val();
		var begin = $('#begin').val();
		var end = $('#end').val();
		if (begin == '' || end == '') {
			alert('选择开始和结束时间!');
			return;
		}
		var url = "/tail/" + urlStr+'/'+senid+'/'+begin+'/'+end;
		window.open(url);
	}
</script>